<template>
  <Row id="photo">
    <Col class="login" :md="{span:24}" :xs="{span:24}">
    <Card>
      <Tabs>
        <TabPane v-for="(v,i) in tablist" :key="v.i" :label="v.title">
          <Row :gutter="16">
            <Col :md="{span:6}" :xs="{span:12}" v-for="(vv,ii) in photoimg[v.text]" style="margin-top: 15px;">
              <div class="img_box">
                <img v-gallery="vv.class"  :src="src+vv.img" class="img">
              </div>
              <h3>{{vv.text}}{{ii}}</h3>
            </Col>
          </Row>
        </TabPane>
      </Tabs>
    </Card>
    </Col>
  </Row>
</template>

<script>
  export default {
    name: 'Photo',
    data() {
      return {
        src:this.$src+'tp5_jzt-blog_server/public/uploads/photo/',
        'tablist': '',
        'photoimg': ''
      }
    },
    components: {

    },
    methods: {
      getlist() {
        this.$axios({
          method: 'post',
          url: 'tp5_jzt-blog_server/public/index.php/home/photolist',
        }).then((res) => {
          console.log('相册数据：',res.data);
          this.tablist = res.data;
        }).catch((error) => {
          console.log(error)
        })
      },
      getimg() {
        this.$axios({
          method: 'post',
          url: 'tp5_jzt-blog_server/public/index.php/home/photodata',
        }).then((res) => {
          console.log('照片数据：',res.data);
          this.photoimg = res.data;
        }).catch((error) => {
          console.log(error);
        })
      },
    },
    created() {
      this.getlist();
      this.getimg();
    },
    mounted() {}
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  #photo{
    padding: 15px;
    overflow-y:hidden;
    text-align: center;
  }

  .img_box {
    width: 100%;
    height: 200px;
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    justify-content:center;
    align-items:center;
  }

  .img_box .img {
    display: block;
    margin: 0 auto;
    height: 100%;
  }
</style>
